<template>
  <el-dialog
    v-model="dialogVisible"
    title="查阅用户"
    :width="1100"
    @closed="closed"
  >
    <MForm
      :fields="fields"
      @submit="search"
      @cancel="search"
      @getForm="getForm"
    >
    </MForm>
    <MTable
      :columns="columns"
      :http="roleAllocatedList"
      :params="params"
      rowKey="userId"
      v-model:isReload="isReload"
    >
      <template #actions="{ row }">
        <MA type="danger" @click="del(row.userId)">删除</MA>
      </template>
    </MTable>
  </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { columns, fields } from './config'
import { roleAllocatedList, roleCancel } from '@/api/system/role'
import { treeList } from '@/api/system/user'

defineOptions({
  name: 'Demo'
})

// 单位名称
treeList().then((res: any) => {
  fields.find((v) => v.key === 'deptId')!.attrs!.data = res.data
})

// 搜索
const params = ref<any>({})
const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
}

let formInstance: FormInstance | undefined
const getForm = (form: FormInstance) => {
  formInstance = form
}
const closed = () => {
  formInstance?.resetFields()
  params.value = {}
}

const dialogVisible = ref(false)
const show = (id: number) => {
  search({
    roleId: id
  })
  dialogVisible.value = true
}

// 重载
const isReload = ref(true)
const reload = () => {
  isReload.value = true
}

const del = (userId: number) => {
  roleCancel({
    userId,
    roleId: params.value.roleId
  }).then(() => {
    ElMessage.success('删除成功')
    reload()
  })
}

defineExpose({
  show
})
</script>

<style lang="scss" scoped></style>
